<template>
    <div class="block">
        <el-container>
            <el-header height="100px">
                <div class="topdiv titletop">
                        <img src="@/assets/title.png" width="100%" height="100%">
                </div>
                <div class="topdiv nav">
                    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                        <el-menu-item index="MyDoc">文档</el-menu-item>
                        <el-menu-item v-if="roles.indexOf('admin')!=-1" index="Authorization">授权管理</el-menu-item>
                        <!--                        <el-menu-item v-if="roles.indexOf('admin')!=-1" index="RoleManager">用户管理</el-menu-item>-->
                        <el-menu-item v-if="roles.indexOf('admin')!=-1" index="DocManager">文档管理</el-menu-item>
                        <el-menu-item index="UserSet">个人信息</el-menu-item>
                    </el-menu>
                </div>
                <el-popover placement="bottom-start" trigger="hover">
                    <div style="margin:10px 0 5px 17px;"><el-link  @click="logout" icon="el-icon-switch-button" :underline="false" class="logout">退出</el-link></div>
                    <div slot="reference"  class="rightdiv userdiv">
                        <i class="el-icon-user-solid"></i>
                        {{userName}}
                    </div>
                </el-popover>
            </el-header>
            <div class="pad"></div>
            <el-main>
                <router-view/>
            </el-main>
        </el-container>
    </div>
</template>

<script>
    export default {
        name: "Back",
        data(){
            return {
                activeIndex: 'MyDoc',
                userName: '',
                roles: []
            }
        },
        mounted() {
            //获取用户信息
            this.getUserInfo();
            this.$router.push({name: this.activeIndex})
        },
        methods:{
            //获取用户信息
            getUserInfo: function () {
                let _this = this;
                _this.$axios.get('user/now')
                    .then(res => {
                        let result= res.data;
                        if (result.status == 200) {
                            let data=result.data;
                            //管理员
                            if (_this.containAdmin(data.roleList)) {
                                _this.userName = '管理员'+data.name;
                            }else{
                                _this.userName = data.name;
                            }
                        }else if (result.status == 500) {
                            _this.$message.error(result.message);
                        }
                    })
            },
            //判断是否包含管理员角色
            containAdmin(roles){
                var result = false;
                for (let index in roles) {
                    let role=roles[index];
                    this.roles.push(role.value);
                    if (role.value == 'admin') {
                        result = true;
                    }
                }
                return result;
            },
            handleSelect(key) {
                this.$router.push({name:key})
            },
            logout() {
                console.log("注销")
                let _this = this;
                _this.$axios.get('auth/logout')
            }
        }
    }
</script>

<style scoped>
    .el-header {
        background-color: rgb(255, 255, 255);
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
        line-height: 100px;
        margin-bottom: 20px;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index:100;
    }
    .pad{
        background-color: rgb(244, 245, 245);
        height: 120px;
    }
    .topdiv{
        float: left;
    }
    .rightdiv{
        float: right;
    }
    .titletop{
        height: 100%;
        color: #409EFF;
    }
    .nav{
        margin-top: 39px;
        margin-right: 20px;
    }
    .userdiv{
        margin-top: 39px;
        height: 61px;
        line-height: 61px;
        text-align: center;
        cursor: pointer;
        color: #606266;
    }
    .a {
        width: 100%;
        height: 100000000px;
        background-color: #42b983;
    }


</style>